<!DOCTYPE html>
<html
  lang="en"
  xmlns:th="http://www.thymeleaf.org"
>

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .position-item {
      width: 200px;
      margin: 10px;
      padding: 5px;
      border: cornflowerblue 1px solid;
      float: left;
      list-style: none;
      background: rgba(112, 158, 243, .5);
      border-radius: 4px;
    }

    .position-item-salary {
      float: right;
    }
  </style>
</head>

<body>
    <span >用户：</span> <span id="userName">大白兔</span><span id="userId" style="visibility:hidden">123</span>
    <div class="search-wrapper">
        <div id="search_box" class="search_box" data-lg-tj-track-code="index_search" data-lg-tj-track-type="1">
            <input id="searchWord" class="searchWord">

            <input type="submit" id="search_button" class="search_button" value="搜索" >
            <input type="submit" id="showAll_button" class="showAll_button" value="显示所有"> 
        </div>
    </div>
    <ul id="J_JobList">
        
    </ul>

</body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script>
    let pageData = JSON.parse('[{"id":1,"jname":"资深测试工程师","inc":"京东","jdate":"2020-09-14T03:27:03.000+00:00","salary":"30k-50k","degree":4,"experience":3,"degreeStr":"本科及以上","experienceStr":"三年及以上工作经验"},{"id":2,"jname":"高级技术美术","inc":"百度","jdate":"2020-09-14T03:48:03.000+00:00","salary":"25k-40k","degree":4,"experience":4,"degreeStr":"本科及以上","experienceStr":"五年及以上工作经验"},{"id":3,"jname":"品牌营销设计","inc":"美团","jdate":"2020-09-15T03:27:03.000+00:00","salary":"20k-30k","degree":4,"experience":3,"degreeStr":"本科及以上","experienceStr":"三年及以上工作经验"},{"id":4,"jname":"C++开发工程师","inc":"阿里巴巴","jdate":"2020-09-14T01:27:03.000+00:00","salary":"10k-20k","degree":4,"experience":3,"degreeStr":"本科及以上","experienceStr":"三年及以上工作经验"},{"id":5,"jname":"java开发工程师","inc":"腾讯","jdate":"2020-09-13T16:27:03.000+00:00","salary":"15k-30k","degree":4,"experience":2,"degreeStr":"本科及以上","experienceStr":"一年及以上工作经验"},{"id":6,"jname":"java开发高级工程师","inc":"拼多多","jdate":"2020-09-13T19:27:03.000+00:00","salary":"25k-40k","degree":4,"experience":3,"degreeStr":"本科及以上","experienceStr":"三年及以上工作经验"},{"id":7,"jname":"java架构师","inc":"字节跳动","jdate":"2020-09-13T21:27:03.000+00:00","salary":"30k-50k","degree":4,"experience":4,"degreeStr":"本科及以上","experienceStr":"五年及以上工作经验"},{"id":8,"jname":"python开发工程师","inc":"网易","jdate":"2020-09-13T20:27:03.000+00:00","salary":"20k-30k","degree":4,"experience":3,"degreeStr":"本科及以上","experienceStr":"三年及以上工作经验"},{"id":9,"jname":"golang开发工程师","inc":"知乎","jdate":"2020-09-14T07:27:03.000+00:00","salary":"20k-30k","degree":4,"experience":3,"degreeStr":"本科及以上","experienceStr":"三年及以上工作经验"},{"id":10,"jname":"前端开发工程师","inc":"华为","jdate":"2020-09-13T20:27:03.000+00:00","salary":"18k-25k","degree":4,"experience":3,"degreeStr":"本科及以上","experienceStr":"三年及以上工作经验"}]');
    $("#showAll_button").click(function ()  {
        $.ajax({
            url: "./data.json",//json文件位置，文件名
            type: "GET",//请求方式为get
            dataType: "json", //返回数据格式为json
            success: function(data) {//请求成功完成后要执行的方法 
                //给info赋值给定义好的变量
                
                pageData=data;
                
                for(var i=0;i<data.length;i++){
                    console.log(pageData[i].name);
                }
            }
        });
    });
  console.log(pageData);
  let arr = [];
  function loadData(data){
      for (let i = 0; i < pageData.length; i++) {
        let item = pageData[i];

        let str = '<li data-job-code="' + item.id + '" class="position-item">'
        + '<div>'
        + '<span>' + item.jname + '</span>'
        + '<span class="position-item-salary">' + item.salary + '</span>'
        + '</div></br>'
        + '<div>'
        + '<span>' + item.experienceStr + '</span></br></br>'
        + '<span>' + item.degreeStr + '</span>'
        + '</div></br>'
        + '<div>'
        + '<span>' + item.inc + '</span></br>'
        + '</div></br>'
        + '<div>'
        + '<button type="button" click-type="click">查看</button>'
        + '<button type="button" click-type="job_collect">收藏</button>'
        + '<button type="button" click-type="cv_send">投简历</button>'
        + '<button type="button" click-type="cv_upload">上传简历</button>'
        + '</div>'
        + '</li>';

        arr.push(str);
    }

    $('#J_JobList').html(arr.join('\n'));
  }
  loadData(pageData);
  

  $('button').on('click', function () {
    let url = 'http://www.testServer.com/kafka/clickEvent';
    let actTime = moment().format('YYYY-MM-DD HH:mm:ss');
    let action = $(this).attr('click-type');
    let jobCode = $(this).parents('li').attr('data-job-code');
    let obj = {
      user_id: $('#userId').html(),
      user_name: $('#userName').html(),
      act_time: actTime,
      action: action,
      jobCode: jobCode
    };
    $.post(url, obj);
  });

    $('#showAll_button').on('click', function () {
        arr = [];
    loadData(pageData);
  });
  $('#search_button').on('click', function () {
      var searchWord = $('#searchWord').val();
      if(searchWord.length == 0){
        return;
      }
    $('#J_JobList').html(" ");
    arr = [];
    for (let i = 0; i < pageData.length; i++) {
        let item = pageData[i];
        var jname = String(item.jname);
        console.log(jname);
        var inc = String(item.inc);
        if(jname.indexOf(searchWord) == -1 && inc.indexOf(searchWord)){
            continue;
        }
        let str = '<li data-job-code="' + item.id + '" class="position-item">'
        + '<div>'
        + '<span>' + item.jname + '</span>'
        + '<span class="position-item-salary">' + item.salary + '</span>'
        + '</div></br>'
        + '<div>'
        + '<span>' + item.experienceStr + '</span></br></br>'
        + '<span>' + item.degreeStr + '</span>'
        + '</div></br>'
        + '<div>'
        + '<span>' + item.inc + '</span></br>'
        + '</div></br>'
        + '<div>'
        + '<button type="button" click-type="click">查看</button>'
        + '<button type="button" click-type="job_collect">收藏</button>'
        + '<button type="button" click-type="cv_send">投简历</button>'
        + '<button type="button" click-type="cv_upload">上传简历</button>'
        + '</div>'
        + '</li>';

        arr.push(str);
    }

    $('#J_JobList').html(arr.join('\n'));

    let url = 'http://www.testServer.com/kafka/searchEvent';
    let actTime = moment().format('YYYY-MM-DD HH:mm:ss');
    let action = $(this).attr('click-type');
    let jobCode = $(this).parents('li').attr('data-job-code');
    let obj = {
      user_id: $('#userId').html(),
      user_name: $('#userName').html(),
      act_time: actTime,
      action: 'searchJob',
      content: searchWord
    };
    $.post(url, obj);

  });
</script>

</html>